<template>
  <div class="item_box">
    <div>
			<p class="title_1 mb20">司内联系人</p>
      <el-table
        v-loading="loading"
        :data="list_0"
      >
        <el-table-column label="联系人姓名" align="center" prop="empName" :show-overflow-tooltip="true"/>
        <el-table-column label="所属部门" align="center" prop="empDepartName" :show-overflow-tooltip="true"/>
        <el-table-column label="职务" align="center" prop="positionname" :show-overflow-tooltip="true"/>
        <el-table-column label="电话" align="center" prop="officePhone" :show-overflow-tooltip="true"/>
        <el-table-column label="手机" align="center" prop="mobilPhone" :show-overflow-tooltip="true"/>
        <el-table-column label="传真" align="center" prop="fax" :show-overflow-tooltip="true"/>
        <el-table-column label="邮箱地址" align="center" prop="outEmail" :show-overflow-tooltip="true"/>
        <el-table-column label="团队角色" align="center" prop="userRoleName" :show-overflow-tooltip="true"/>
        <el-table-column label="项目角色" align="center" prop="teamName" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" @click="handle(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
		<div>
			<p class="title_1 mb20">客户联系人</p>
      <el-table
        v-loading="loading"
        :data="list_1"
      >
        <el-table-column label="联系人姓名" align="center" prop="linkmanName" :show-overflow-tooltip="true"/>
        <el-table-column label="手机" align="center" prop="linkmanMobile" :show-overflow-tooltip="true"/>
        <el-table-column label="邮箱地址" align="center" prop="linkmanMail" :show-overflow-tooltip="true"/>
        <el-table-column label="所属部门" align="center" prop="linkmanDept" :show-overflow-tooltip="true"/>
        <el-table-column label="职务" align="center" prop="linkmanTitle" :show-overflow-tooltip="true"/>
        <el-table-column label="电话" align="center" prop="linkmanPhone" :show-overflow-tooltip="true"/>
        <el-table-column label="传真" align="center" prop="linkmanFax" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" @click="handle(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from "vue"

	const props = defineProps({
		activeName: {
			type: String,
		},
	})

  const list_0 = ref([])
  const list_1 = ref([])
  const loading = ref(false)
  const total = ref(0)

  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
    },
  })

  const { queryParams } = toRefs(data)

  const getList = () => {
    loading.value = true
    setTimeout(() => {
      list_0.value = [
        {
					empName: '张三',
					empDepartName: '综合业务部',
					positionname: '员工',
					officePhone: '01066123321',
					mobilPhone: '18890901212',
					fax: '01066123321',
					outEmail: 'asdf@zxc.com',
					userRoleName: '负责人',
					teamName: '项目经理',
					linkmanName: '李四',
					linkmanMobile: '18812332111',
					linkmanMail: 'asdf@zxc.com',
					linkmanDept: '综合业务部',
					linkmanTitle: '员工',
					linkmanPhone: '0123890123',
					linkmanFax: '01066123321',
        },
				{
					empName: '张三',
					empDepartName: '综合业务部',
					positionname: '员工',
					officePhone: '01066123321',
					mobilPhone: '18890901212',
					fax: '01066123321',
					outEmail: 'asdf@zxc.com',
					userRoleName: '负责人',
					teamName: '项目经理',
					linkmanName: '李四',
					linkmanMobile: '18812332111',
					linkmanMail: 'asdf@zxc.com',
					linkmanDept: '综合业务部',
					linkmanTitle: '员工',
					linkmanPhone: '0123890123',
					linkmanFax: '01066123321',
        },
				{
					empName: '张三',
					empDepartName: '综合业务部',
					positionname: '员工',
					officePhone: '01066123321',
					mobilPhone: '18890901212',
					fax: '01066123321',
					outEmail: 'asdf@zxc.com',
					userRoleName: '负责人',
					teamName: '项目经理',
					linkmanName: '李四',
					linkmanMobile: '18812332111',
					linkmanMail: 'asdf@zxc.com',
					linkmanDept: '综合业务部',
					linkmanTitle: '员工',
					linkmanPhone: '0123890123',
					linkmanFax: '01066123321',
        },
      ]
      total.value = list_0.value.length
			list_1.value = list_0.value
      loading.value = false
    }, 200);
  }
  const handle = (val) => {

  }
  const exportList = () => {
    
  }
  getList()

	watch(() => props.activeName, (val) => {
		if (val == '2')
		getList()
	})
</script>
<style lang="scss" scoped>
</style>
